import React, {PureComponent} from 'react'
import echarts from 'echarts';
import setBaseChart from '../chart/base-chart'
import {setTitle, scale, tooltip} from '../chart/util/common'

/*散点图*/
class Discrete extends PureComponent {
    componentWillReceiveProps(nextProps) {
        const {data} = nextProps
        this.myChart.setOption({
            title: setTitle({text: data.title}),
            series: [{
                data: data.data
            }]
        })
    }

    componentDidMount() {
        const {setChartInstance} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        const series = [];
        series.push({
            name: 'sss',
            type: 'scatter',
            data: []
        });

        // for (let i = 0; i < 200; i++) {
        //     series[0].data.push(
        //         [Math.random() - .5, Math.random() - .5])
        // }
        const option = {
            title: setTitle({text: ''}),
            tooltip: {
                ...tooltip,
                "trigger": "axis",
                "axisPointer": {
                    "type": "shadow"
                },
            },
            grid: {
                left: '5%',
                right: '5%',
                top: 34 * scale,
                bottom: '10%',
                containLabel: true
            },
            "xAxis": [
                {
                    "type": "value",
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: scale
                        }
                    },
                    axisTick: {
                        "show": true
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            width: scale
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 12 * scale
                        }
                    },
                    // "data": xData,
                }
            ],
            "yAxis": [
                {
                    "type": "value",
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: scale
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            width: scale
                        }
                    },
                    axisTick: {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 12 * scale
                        }
                    }
                }
            ],
            series: series
        };
        this.myChart.setOption(option);
    }

    render() {
        return (
            <div style={{width: '100%', height: '100%'}} ref='chart'/>
        )
    }

}

export default setBaseChart(Discrete)